<div id="<%= dom_id file %>" class="relative min-h-full max-w-full flex-1 flex flex-col justify-between space-y-2">
  <div class="flex flex-col h-full">
    <% if file.representable? && is_image? %>
      <%= image_tag helpers.main_app.url_for(file), class: "rounded-lg max-w-full self-start #{@extra_classes}", loading: :lazy, width: file.metadata["width"], height: file.metadata["height"] %>
    <% elsif is_audio? %>
      <%= audio_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
    <% elsif is_video? %>
      <%= video_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
    <% else %>
      <%= content_tag file.representable? ? :a : :div, **document_arguments do %>
        <div class="flex flex-col justify-center items-center w-full">
          <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
        </div>
      <% end %>
    <% end %>
    <% if @field.display_filename %>
      <span class="text-gray-500 mt-1 text-sm truncate" title="<%= file.filename %>"><%= file.filename %></span>
    <% end %>
  </div>
  <div class="flex space-x-2">
    <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: @field, file: file, resource: @resource) %>
  </div>
</div>
